
<template>
  <div  ref="tableWrap"
        style="height:100%;display:flex;flex-direction:column;
        border: 5px solid black;background-color:pink;">
    <div style="width: 100%;"
         :style="{height:clickHeight?'100px':'50px'}"
         @click="clickHeight = !clickHeight"
    ></div>
    <div  ref="tableContent" style="
    flex:auto;background-color:greenyellow;
    border: 5px solid red" >
      <Table
        :columns="column"
        :data="datas"
        :height="height"
        border
        stripe
        ref="table"
        :no-data-text="nodatatext"
      >
        <div :slot="slots"></div>
      </Table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        clickHeight:false,
        width: 0,
        height: 300,
        element: '',
        timer: null,
        tableWrap: '',
        slots:"",
        nodatatext:"暂无数据",
        columns: [
          {
            title: 'Name',
            key: 'name'
          },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: 'Address',
            key: 'address'
          }
        ],
        data: [

          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },

        ],
      }
    },
    mounted() {
      this.element = this.$refs.tableContent;
      window.addEventListener('resize',this.handleResize,false);
    },
    computed: {

      // 表格数据
      datas() {
        return this.data;
      },
      column() {
        if (!this.width) return this.columns;
        return this.initWidth();
      },

    },
    activated() {
      if (this.element) {
        this.tableResize("activated");
      }
      window.addEventListener('resize',this.handleResize,false);
    },
    deactivated(){
      window.removeEventListener('resize',this.handleResize);
    },
    beforeDestroy(){
      window.removeEventListener('resize',this.handleResize);
    },
    watch: {

      'element.offsetWidth' () {
        this.width = this.element.offsetWidth;
        this.height = this.element.offsetHeight;
      },
      'element.offsetHeight' () {
        console.log("watch this.element.offsetHeight",this.element.offsetHeight);
        this.height = this.element.offsetHeight;
      },
    },
    methods: {

      handleResize(e){
        console.log("this.height",this.height)
        console.log("this.element.offsetHeight",this.element.offsetHeight)
        if(this.height != this.element.offsetHeight){
          this.tableResize("handleResize");
        }
      },

      // 初始化宽度
      initWidth() {
        let width = this.width;
        let columns = this.columns.filter((item, index) => {
          if (index === this.columns.length - 1 && item.key === 'action') {
            item.fixed = 'right';
          }
          if (!item.width && !item.minWidth) {
            item.minWidth = 100;
          }
          return true;
        });
        return columns;
      },

      tableResize(who) {
        console.log("11111111111111111"+who)
        this.height = this.element.offsetHeight;
      },

    }
  }
</script>

